<template>
  <div :class="['pui-tabs', type, round && 'round']" ref="tabsRef">
    <div :class="['pui-tabs_content', type]" ref="contentRef">
      <div class="pui-tabs_top-line"></div>
      <div class="pui-tab_options pui-tab_options-left" v-if="type !== 'flex'">
        <div class="pui-tab_btn" @click="movePrev" v-if="componentRef.isShow"><pui-icon name="double-arrow-left" /></div>
      </div>
      <div
        :title="item?.name"
        :class="['pui-tab', componentRef.currentIndex === i && 'active-tab']"
        v-for="(item, i) in componentRef.tabList"
        ref="tabItemRef"
        :key="i"
        @dblclick.stop="tabOnDblClickHandle(item, i)"
        @click.stop="tabOnClickHandle(item, i)"
        @click.right.native="tabOnRightClickHandle($event, item, i)"
      >
        <img class="svg-img" v-if="item?.svgSrc" :src="item.svgSrc" draggable="false" />
        <span class="pui-tab_name">{{ item?.name }}</span>
        <pui-icon className="icon" name="close" @click.stop="removeTabClickHandle(item, i)" v-if="remove" />
        <div class="active-line"></div>
      </div>
      <div class="pui-tab_options pui-tab_options-right" v-if="type !== 'flex'">
        <div class="pui-tab_btn" @click="addTabClickHandle" v-if="add"><pui-icon name="plus" /></div>
        <div class="pui-tab_btn" @click="moveNext" v-if="componentRef.isShow"><pui-icon name="double-arrow-right" /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-tabs',
});
</script>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue';
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  add: false,
  remove: false,
  round: false,
});
const emits = defineEmits<{
  'update:tabList': [val: any[]];
  onAdd: [];
  onRemove: [val: object];
  onClickHandle: [val: object];
  onDBClickHandle: [val: object];
  onRightClickHandle: [val: object];
}>();

const tabsRef = ref();
const contentRef = ref();
const tabItemRef = ref();

const componentRef = reactive({
  currentIndex: 0,
  tabList: props.tabList,
  isShow: false,
  isListChange: true,
  scrollPosition: {
    left: 0,
    top: 0,
  },
});

watch(
  () => props.tabList.length,
  (v1) => {
    if (v1) {
      componentRef.isListChange = true;
    }
  }
);
const movePrev = () => {
  tabsRef.value.scrollLeft -= tabsRef.value?.clientWidth;
};

const moveNext = () => {
  tabsRef.value.scrollLeft += tabsRef.value?.clientWidth;
};

const addTabClickHandle = () => {
  if (!componentRef.isShow) {
    componentRef.isShow = contentRef.value.clientWidth > tabsRef.value.clientWidth;
  }
  if (componentRef.isListChange) {
    componentRef.isListChange = false;
    setTimeout(() => {
      componentRef.currentIndex = props.tabList.length - 1;
    }, 10);
    moveNext();
  }
  emits('onAdd');
};

const removeTabClickHandle = (item: Boolean, index: number) => {
  const emitData = {
    item,
    index,
  };
  if (index <= componentRef.currentIndex && props.tabList.length > 2) {
    componentRef.currentIndex -= 1;
  }
  if (props.tabList.length === 2) {
    componentRef.currentIndex = 0;
  }
  componentRef.tabList.splice(index, 1);
  if (componentRef.isShow) {
    componentRef.isShow = contentRef.value.clientWidth > tabsRef.value.clientWidth;
  }
  movePrev();
  emits('onRemove', emitData);
  emits('update:tabList', componentRef.tabList);
};

const tabOnClickHandle = (item: any, index: number) => {
  const tabsItemOffsetLeft = tabItemRef.value[index].offsetLeft - 30;
  const tabsOffsetLeft = tabsRef.value.offsetLeft;
  tabsRef.value.scrollLeft = tabsItemOffsetLeft - tabsOffsetLeft;
  componentRef.currentIndex = index;
  emits('onClickHandle', item);
};

const handleScroll = (e: { target: { scrollLeft: number; scrollTop: number } }) => {
  componentRef.scrollPosition.left = e.target.scrollLeft;
  componentRef.scrollPosition.top = e.target.scrollTop;
};

const tabOnDblClickHandle = (item: any, index: number) => {
  emits('onDBClickHandle', { item, index });
};
const tabOnRightClickHandle = ($event: any, item: any, index: number) => {
  emits('onRightClickHandle', { $event, item, index });
};

onMounted(() => {
  componentRef.isShow = contentRef.value.clientWidth > tabsRef.value.clientWidth;
  contentRef.value.addEventListener('scroll', handleScroll, true);
});
</script>
